<!--
 * @Description: 
 * @Author: WuShiKang
 * @Date: 2021-04-06 11:43:13
 * @LastEditors: WuShiKang
 * @LastEditTime: 2021-04-16 01:26:37
-->

<template>
  <div>
     <div id="top">
    <div id="toadd">
      <el-button type="primary" size="small" @click="toAdd()">添加</el-button>
      </div>
      <div id="iput"><el-input v-model="input" placeholder="请输入名称"></el-input>
      </div>
  <div id="search">
  <el-button type="primary" icon="el-icon-search" size="mini" @click="search()" >搜索</el-button>
  </div>
  </div>
 <el-table
      :data="baseConfigData" style="width: 100%" size="small">
      <el-table-column type="index" label="序号" width="100"> </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        >
      </el-table-column>
      <el-table-column
        prop="val"
        label="内容"
        >
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="说明">
      </el-table-column>
  
   <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="small"
          @click="handleEdit( scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete( scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>


<el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref="form">

    <el-form-item label="名称：" prop="name" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    
    <el-form-item label="内容：" :label-width="formLabelWidth">
       <el-input v-model="form.val" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="说明介绍：" :label-width="formLabelWidth">
       <el-input type="textarea" v-model="form.introduce" autocomplete="off"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="toSave('form')">确 定</el-button>
  </div>
</el-dialog>



  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
       title:"新增栏目",
       dialogFormVisible: false,
       form:{},
       input:"",
        formLabelWidth: "100px",
       rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },

    };
  },
  computed: {
   ...mapState("baseConfig", ["baseConfigData"]),
  },
  methods: {
   ...mapActions("baseConfig", [
      "findAllbaseConfig",
       "saveOrUpdatebaseConfig",
       "deletebaseById",
       "findByKeyName",
    ]),
 //保存
  toSave(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //通过表单验证，将数据提交给后台，提交成功之后，关闭模态框，并提示用户保存成功
          // alert('submit!');
          let res = await this.saveOrUpdatebaseConfig(this.form);
          if (res.status == 200) {
              //200说明保存成功了
            //再次获取数据
             this.findAllbaseConfig();
               //关闭模态框
            this.dialogFormVisible = false;
              //提示用户保存成功
             this.$message({
                showClose: true,
            message: res.message,
          type: 'success'
        });
          }
        
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     //新增按钮
  toAdd(){
    this.title = "新增栏目";
   this.dialogFormVisible=true;
   this.form={};

  },
  search(){
          this.findByKeyName({name:this.input});
       },
     //编辑按钮
       handleEdit( row) {
      this.title="编辑栏目";
      this.dialogFormVisible=true;
      this.form={...row};

       
      },
      //删除按钮
      handleDelete( row) {
       this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then( async () => {
            //发送请求进行删除
           // console.log(row);
      let { id } = row;
      let res = await this.deletebaseById({ id });

      if (res.status == 200) {
        //200说明删除成功了
        //再次获取数据
       this.findAllbaseConfig();

        //提示用户删除成功
         this.$message({
                showClose: true,
            message: '删除成功！',
          type: 'success'
        });
      }

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });


      },
  },
 
  created() {
   this.findAllbaseConfig();
  },
  mounted() {

  },
};
</script>
<style scoped>
#top{
width: 900px;
height:80px;
}
#toadd{
width: 75px;
height: 38px;
float: left;
}
#iput{
  width: 200px;
  height: 38px;
  float: left;
}
#search{
width: 75px;
height: 38px;
margin-left: 10px;
margin-top: 5px;
float: left;
}
</style>